
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-animate-ng-show</title>
  <style>
    .box {
      transition: all linear 2s;
      border: 1px solid black;
      margin-top: 10px;
      padding: 10px;
      background: green;
    }
    /* 此种方式必须结合ng-show/ng-hide指令使用 */
    .box.ng-hide {
      opacity: 0;
      font-size:10px
    } 
  </style>
  

  <script src="./libs/js/angular-1.6.9.min.js"></script>
  <script src="./libs/js/angular-animate.min.js"></script>
  

  
</head>
<body ng-app="app">
  <div ng-init="checked = true">
  <label>
    <input type="checkbox" ng-model="checked" />
    显示
  </label>
  <div class="box" ng-show="checked">
    需要隐藏或显示的内容
  </div>
</div>
</body>
<script>
  /*
  必须在自己的模块中注入ngAnimate：
    一般来说不包含在angular核心包中的功能模块都需要在声明模块时进行依赖注入
  */
  var app=angular.module('app',['ngAnimate']);
</script>
</html>